<template>
	<view>

		<view class="product-list" v-if="evaluateList.length!=0">
			<!--商品列表-->

			<view  class="comment"  v-for="(item,index) in evaluateList" :key="index" @click="to(item)">
				<view class="head">
					<view class="head_content">
						<u-avatar :src="item.memberIcon" size="mini"></u-avatar>
						<text class="head_content_text">{{item.memberNickName}}</text>
						<u-rate :count="count" v-model="item.star" :gutter="5" disabled></u-rate>
					</view>
					<view class="head_date">{{item.createTime}}</view>
				</view>
				<view class="nav">
					<view class="nav_title"> {{item.content}}</view>
					<view class="nav_img" v-if="item.pics!=''&&item.pics!=null">
						<u-image class="nav_img_image" width="200rpx" height="200rpx" v-for="(pic,i) in item.pics" :key="i" :src="pic"></u-image>
					</view>
				</view>
				<view class="reply">回复</view>

				<!--商品列表-->
			</view>
			<!--加载loadding-->
			<tui-loadmore v-if="loadding" :index="3" type="primary"></tui-loadmore>
			<tui-nomore v-if="!pullUpOn" backgroundColor="#fff"></tui-nomore>
			<!--加载loadding-->
		</view>
		<tui-no-data v-else :fixed="false" imgUrl="/static/img/toast/img_noorder_3x.png">暂无评论</tui-no-data>
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		<failTimeout v-show="failTimeout"></failTimeout>
		</view>
</template>

<script>
	import PmsPortalCommentController from '../../api/PmsPortalCommentController.js'
	import {formatDate} from '../../utils/date.js'
	export default {
		data() {
			return {
				failTimeout:false,
				value: 4,
				count: 5,
				loadding: false,
				pullUpOn: true,
				evaluateList:[],
				ProductId:null,
				pageNum:0,
			}
		},
		onLoad(option) {
			this.ProductId=option.productId;
			this.rendering();
		},
		methods: {
			rendering() {
				if(this.pullUpOn){
					this.loadding=true;
					this.pageNum++;
					PmsPortalCommentController.getByProductId(this.ProductId, this.pageNum, 10).then(res => { //评价
						if (res.data.code == 200) {
							res.data.data.forEach(e => {
								e.createTime = formatDate(new Date(e.createTime), 'yyyy-MM-dd')
								e.pics = e.pics.split(',')
								this.evaluateList.push(e)
							})
							if(res.data.data.length==0){
								this.pullUpOn=false;
							}
							this.loadding=false;
						}
					}).catch(err => {
						if(err.errMsg=='request:fail timeout'){
							this.failTimeout=true
						}
					})
				}
				
			},
			to(item){
				uni.navigateTo({
					url:'../commentReply/commentReply?commentId='+item.id
				})
			}
		},
		onReachBottom: function() {
			
			
			this.rendering()
		}
	}
</script>
<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style scoped>
	.comment {
		background: white;
		padding: 22rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		border-bottom: 1px solid #dcdcdc;
	}

	.comment .head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.comment .head .head_content {
		display: flex;
		align-items: center;
	}

	.head_content_text {
		max-width: 310rpx;
		margin: 0 10rpx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/

	}

	.nav {}

	.nav .nav_img {
		display: flex;
		flex-wrap: wrap;
	}

	.nav .nav_title {
		margin: 10rpx 0;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
	}

	.nav .nav_img .nav_img_image {
		margin: 10rpx 20rpx 0 0;
	}

	.reply {
		margin-top: 10rpx;
		text-align: end;
		color: #3985ff;
		margin-right: 10rpx;
	}
</style>
